<template>
    <!--汇总-->
    <div style="margin-left: 30px;text-align: center;" class="mt-print-total">
        <img style="display:block;height:280px;" src="../../../assets/img/print.jpg" alt="">
        <div style="margin-bottom: 20px;margin-top: -15px;">
            <i v-show="'zc'===types" style="margin-left: 235px;font-weight: 900;">=========</i>
            <p v-show="'zc'===types" style="margin-left: 235px;font-weight: 900;">outward</p>
            <i v-show="'xc'===types" style="margin-left: 315px;font-weight: 900;">=========</i>
            <p v-show="'xc'===types" style="margin-left: 315px;font-weight: 900;">inward</p>
        </div>
        <div style="display: flex;margin-top: -1px;">
            <span style="margin-left: 48px;width: 196px">Vessel:<span style="display: inline-block;width:140px;border-bottom: 1px solid #000;">{{ form.shipName }}</span></span>
            <span style="margin-left: 65px;width: 200px">Voy.No:<span style="display: inline-block;width:80px;border-bottom: 1px solid #000;">{{ form.voyage }}</span></span>
            <span style="margin-left: 10px;width: 200px">Nationality:<span style="display: inline-block;width:100px;border-bottom: 1px solid #000;">{{ form.portName }}</span></span>
        </div>
        <div style="display: flex;margin: 8px 0 8px 44px;">
            <span style="width: 300px">Tally commenced on:<span style="display: inline-block;width:150px;border-bottom: 1px solid #000;">{{form.createDateTime}}</span></span>
            <span style="margin-left:70px;width: 300px">Date oflist:<span style="display: inline-block;width:150px;border-bottom: 1px solid #000;">{{ form.taskTime }}</span></span>
        </div>
        <div style="text-align:left;text-indent:25px;margin:0 54px;line-height: 26px;">
            This is to certify that the impartial tallying has been carried out on the above mentioned vessel in 
            the process of loading/unloading of cargo/containers and the numbers of cargo/containers have been confirmed by this company and this summary on tally is hereby made ont as follows:
        </div>
        <p style="text-align:left;margin:10px 60px 0;text-indent:25px;">1. Total numbers as shown on the manifest/shipping</p>
        <div class="print-flex mt-45" style="margin-top: 10px;margin-left:10px;">
            <i style="margin-left: 42px;">Carge<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>p'kgs/Ttons,</i>
            <div style="display: inline-block;">Container<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;">{{ list.tally2 }}</span>X20',</div>
            <div style="display: inline-block;"><span style="display: inline-block;width:60px;border-bottom: 1px solid #000;">{{ list.tally4 + list.tally45 }}</span>X40'</div>
        </div>
        <p style="text-align:left;margin:10px 60px 0;text-indent:25px;">
            2. Total numbers obtained through tallying:
        </p>
        <div class="print-flex mt-35" style="margin-top: 10px;margin-left:10px;">
            <i style="margin-left: 42px">Carge<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>p'kgs/Ttons,</i>
            <div style="display: inline-block;letter-spacing:1px;">
                Container<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;">{{ list.cargo2 }}</span>X20',
            </div>
            <div style="display: inline-block;letter-spacing:1px;">
                <span style="display: inline-block;width:60px;border-bottom: 1px solid #000;">{{ list.cargo4 + list.cargo45 }}</span>X40'
            </div>
        </div>
        <p style="text-align:left;margin:10px 60px 0;text-indent:25px;">
            3. Total numbers obtained through tallying in classification:
        </p>
        <p style="text-align:left;margin:10px 60px 0;text-indent:25px;">
            Overlanded:
        </p>
        <div class="print-flex mt-50"  style="margin-top: 10px;margin-left:10px;">
            <i style="margin-left: 42px">Carge<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>p'kgs/Ttons,</i>
            <i style="margin-left:180px;min-width: 100px">Container<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>X20',</i>
            <i style="margin-left: 30px;min-width: 100px"><span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>X40'</i>
        </div>
        <p style="text-align:left;margin:10px 60px 0;text-indent:25px;">
            Shortlanded:
        </p>
        <div class="print-flex mt-35" style="margin-top: 10px;margin-left:10px;">
            <i style="margin-left: 42px">Carge<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>p'kgs/Ttons,</i>
            <i style="margin-left:180px;min-width: 100px">Container<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>X20',</i>
            <i style="margin-left: 30px;min-width: 100px"><span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>X40'</i>
        </div>
        <p style="text-align:left;margin:10px 60px 0;text-indent:25px;">
            Original dabage:
        </p>
        <div class="print-flex mt-35" style="margin-top: 10px;margin-left:10px;">
            <i style="margin-left: 42px">Carge<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>p'kgs/Ttons,</i>
            <i style="margin-left:180px;min-width: 100px">Container<span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>X20',</i>
            <i style="margin-left: 30px;min-width: 100px"><span style="display: inline-block;width:60px;border-bottom: 1px solid #000;"></span>X40'</i>
        </div>
        <p style="text-align:left;margin:10px 60px 0;text-indent:25px;">
            4. Relevant notes to tallying:
        </p>
        <div class="print-flex mt-35" style="margin-left: 210px;width: 250px;height: 50px;flex-wrap: wrap;">
            <div style="width: 42px;" v-if="types=='zc'">实装</div>
            <div style="width: 50px;" v-if="types=='xc'">实卸</div>
            <div style="width: 190px;">
                <div style="width: 190px;height: 50px;display: flex" v-if="list.oe20>0 || list.oe40>0 || list.of20>0 || list.of40>0">
                    <div style="width: 60px;">外贸：</div>
                    <div style="flex: 1">
                        <div style="width: 100%;">
                            <span v-if='list.oe20>0'>{{ list.oe20 }}*20E</span>
                            <span v-if='list.oe40>0'>{{ list.oe40 }}*40E</span>
                            <span v-if='list.oe45>0'>{{ list.oe45 }}*45E</span>
                        </div>
                        <div style="width: 100%;">
                            <span v-if='list.of20>0'>{{ list.of20 }}*20F</span>
                            <span v-if='list.of40>0'>{{ list.of40 }}*40F</span>
                            <span v-if='list.of45>0'>{{ list.of45 }}*45F</span>
                        </div>
                    </div>
                </div>
                <div style="margin-top:2px;width:190px;height: 50px;display: flex" v-if="list.ie20>0 || list.ie40>0 || list.if20>0 || list.if40>0">
                    <div style="width:60px;">内贸：</div>
                    <div style="flex: 1">
                        <div style="width: 100%;">
                            <span v-if='list.ie20>0'>{{ list.ie20 }}*20E</span>
                            <span v-if='list.ie40>0'>{{ list.ie40 }}*40E</span>
                            <span v-if='list.ie45>0'>{{ list.ie45 }}*45E</span>
                        </div>
                        <div style="width: 100%;">
                            <span v-if='list.if20>0'>{{ list.if20 }}*20F</span>
                            <span v-if='list.if40>0'>{{ list.if40 }}*40F</span>
                            <span v-if='list.if45>0'>{{ list.if45 }}*45F</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="print-flex">
            <div style="margin-left: 65px">ChiefTally:{{ list.tallyClerk }}</div>
        </div>
    </div>
</template>

<script>
    import { getShipPlanId,printTotal } from "@/api/shipPlan/shipPlan";
    import { getLocalTime } from "@/utils/dateFormat";
    export default {
        name: "totalPrint",
        data() {
            return {
                form:{},
                list:{},
                types:''
            }
        },
        created() {
            this.types = JSON.parse(localStorage.getItem('tps'))
            const id=this.$route.params.id
            const params={
                search_EQ_shipPlanNo:id,
            }
            getShipPlanId(id).then(response=>{
                console.log('==========')
                console.log(response.data)
                this.form=response.data
                this.form.taskTime = getLocalTime(this.form.taskTime, 'DD-MM-YYYY')
                this.form.createDateTime = getLocalTime(this.form.createDateTime, 'DD-MM-YYYY')
                printTotal(params).then(res=>{
                    console.log('---------')
                    console.log(res.data)
                    this.list=res.data
                    this.$nextTick(()=>{
                        console.log('打印')
                    window.print()
                    window.close()
                    })
                })
            })

        },
        methods: {}
    }
</script>

<style scoped>
    .mt-20{
        margin-top: 20px;
    }
    .mt-32{
        margin-top: 32px;
    }
    .mt-35{
        margin-top: 20px;
    }
    .mt-40{
        margin-top: 40px;
    }
    .mt-45{
        margin-top: 45px;
    }
    .mt-50{
        margin-top: 50px;
    }
    .mt-60{
        margin-top: 60px;
    }
    .mt-70{
        margin-top: 70px;
    }
    .mt-80{
        margin-top: 80px;
    }
    .mt-85{
        margin-top: 85px;
    }
    .mt-print {
        margin-top: 315px !important;
        font-size: 14px;
    }
    .mt-print-total {
        margin-top: 30px !important;
        font-size: 14px;
    }
    .mt-print-detail{
        /* margin-top: 260px !important; */
        font-size: 14px;
    }
    .mt-print-damage{
        margin-top: 240px !important;
        font-size: 14px;
    }
    .mt-print-port{
        margin-top: 180px !important;
        font-size: 14px;
    }
    .print-flex {
        /* display: flex; */
    }

    .print-warp {
        display: flex;
        flex-wrap: wrap;
    }

    .page-next {
        page-break-after: always;
    }
    .print-other-line{
        position:relative;
        width:500px;
        box-sizing:border-box;
        border:1px solid;
        line-height:120px;
        text-indent:5px;
    }
    .print-other-line::before{
        content:"";
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:250px;
        box-sizing:border-box;
        border-bottom:1px solid;
        transform-origin:bottom center;
        transform:rotateZ(-45deg) scale(1.414);
        animation:slash 5s infinite ease;
    }
    .set{
        width: 500px;
        background: #000;
        transform-origin:bottom center;
        transform:rotateZ(-45deg) scale(1.414);
        height: 1px;
    }
</style>
